<template>
  <div class="catalogue" v-if="isShow">
    <div class="backcate" @click="isMulu">
      <img src="../assets/xy.png" alt="" class="img1" />
      <div class="names">宋成祖</div>
    </div>
    <div class="Title">
      <div class="titleName">目录</div>
      <div class="numOrder">
        <span class="num">共308章</span>
        <span class="order">倒序</span>
      </div>
      <div class="juan">
        <span>正文卷</span>
      </div>
    </div>
    <div class="section">
      <ul>
        <li><span>第1章</span><span>靖康天子</span></li>
        <li><span>第2章</span><span>逼宫赵信</span></li>
        <li><span>第3章</span><span>狼狈为奸的君臣俩</span></li>
        <li><span>第4章</span><span>战队鬼才大卫</span></li>
        <li><span>第5章</span><span>赵婕别跑</span></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    isMulu() {
      this.isShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.catalogue {
  .backcate {
    margin: 4vw 4vw 6vw 4vw;

    display: flex;
    img {
      width: 6vw;
      height: 6vw;
    }
    .names {
      color: rgb(51, 55, 61);
      font-size: 14px;
      padding-left: 3vw;
      display: flex;
      align-items: center;
    }
  }
  .Title {
    .titleName {
      text-align: center;
      font-size: 14px;
      color: rgb(237, 66, 75);
      padding-bottom: 4vw;
      border-bottom: 1px solid rgb(237, 66, 75);
    }
    .numOrder {
      margin: 4vw;
      display: flex;
      justify-content: space-between;
      .num {
        font-size: 15px;
        font-weight: bold;
      }
      .order {
        font-size: 14px;
        color: rgb(51, 55, 61);
      }
    }
    .juan {
      background: rgb(246, 247, 249);
      padding: 4vw 0 2vw 0;
      span {
        font-size: 13px;
        padding-left: 4vw;
        color: rgb(150, 155, 163);
      }
    }
  }
  .section {
    margin: 0vw 4vw 4vw 4vw;
    li {
      padding: 4vw 0vw;
      border-bottom: 1px solid rgb(244, 245, 246);
      span {
        font-size: 14px;
        color: rgb(51, 55, 61);
        &:nth-child(2) {
          padding-left: 2vw;
        }
      }
    }
  }
}
</style>